<template>
  <!-- 选择租赁房源弹窗 -->
  <div>
    <el-dialog title="请选择租赁的房源" v-model="state.dialogVisible" width="782px" class="leaseHouseDialogPage" center
      :close-on-click-modal="false">
      <div class="d-flex a-center m-b20">
        <label>门牌号</label>
        <el-input class="m-l5" v-model="state.housingNumber" clearable placeholder="请输入门牌号" style="width: 300px"
          @input="queryHousingNumber">
        </el-input>
        <el-button class="m-l5" color="#FF7B50" style="color: #fff" @click="queryHousingNumber">查询</el-button>
      </div>
      <el-table :data="state.tableData" border v-loading="tableLoadingFlag" max-height="500">
        <el-table-column prop="index" label="序号" width="100" align="center" />
        <el-table-column prop="housingNumber" label="门牌号" align="center" />
        <el-table-column prop="area" label="房源持有面积" align="center" />
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <el-button plain color="#FF7B50" @click="doSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElTable, ElTableColumn, ElDialog } from "element-plus";
import { housingApi } from "@/api/assets";

const state = reactive({
  dialogVisible: false,
  housingNumber: "",
  tableData: [],
  newTableData: [],
});
const tableLoadingFlag = ref(false);
const initTableData = (assetId, signType) => {
  tableLoadingFlag.value = true;
  if (typeof (assetId) == 'string') {
    housingApi.getFreeHousingList({ assetsId: assetId, signType: signType }).then((res) => {
      const { code, data, msg } = res;
      if (code == 200) {
        state.tableData = data.map((n, i) => {
          n.index = i + 1;
          return n;
        });
        state.newTableData = data.map((n, i) => {
          n.index = i + 1;
          return n;
        });
        tableLoadingFlag.value = false;
      }
    });
  } else {
    housingApi.getFreeHousingList2({ assetsId: assetId, signType: signType }).then((res) => {
      const { code, data, msg } = res;
      if (code == 200) {
        state.tableData = data.map((n, i) => {
          n.index = i + 1;
          return n;
        });
        state.newTableData = data.map((n, i) => {
          n.index = i + 1;
          return n;
        });
        tableLoadingFlag.value = false;
      }
    });
  }

};

// 向父组件传值
const emits = defineEmits(["getHouseInfo"]);
const doSelect = (row) => {
  /* let obj = {
    // 房源位置和持有面积
    housingNumber: row.housingNumber,
    area: row.area,
  };*/
  emits("getHouseInfo", row);
  state.dialogVisible = false;
};

// 开启弹窗
const open = (assetId, signType) => {
  initTableData(assetId, signType);
  state.dialogVisible = true;
};

/**
 * 根据门牌号本地模糊查询
 */
const queryHousingNumber = () => {
  if (state.housingNumber === "" || state.housingNumber.trim() === "") {
    return (state.tableData = state.newTableData);
  }

  state.tableData = state.newTableData.filter((item) => {
    if (item.housingNumber.indexOf(state.housingNumber) > -1) {
      return item;
    }
  });
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
:deep(.leaseHouseDialogPage) {
  .el-dialog__header {
    padding-top: 18px;
    padding-bottom: 0;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      font-family: SourceHanSansMedium;
    }
  }

  .el-dialog__body {
    padding-top: 25px;

    .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
      padding: 20px 0;
      background: #f7f7fa;

      .cell {
        font-weight: 400;
        color: #4d4d4d;
      }
    }
  }
}
</style>
